<template>
  <div class="app-container">
    <div class="user_cid_box">
      <div class="view-title">用户Cid</div>
      <!-- 搜索 -->
      <div class="search_box">
        <div>
          <el-form ref="formCid" :model="cidForm" label-width="80px">
            <el-form-item label="用户id">
              <el-input v-model="cidForm.userId"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="search_btn">
          <el-button type="primary" @click="handleSearch">搜索</el-button>
        </div>
      </div>
      <el-table
        :data="cidTableData"
        :header-cell-style="{
          borderColor: '#F0F0F0',
          height: '51px',
          background: '#F0F0F0',
          color: '#333',
        }"
        :row-style="{ height: '51px' }"
        :cell-style="{ borderColor: '#F0F0F0' }"
        style="width: 100%"
      >
        <el-table-column prop="id" label="ID" width="180" align="center">
        </el-table-column>
        <el-table-column prop="nick" label="昵称" align="center">
        </el-table-column>
        <el-table-column prop="phone" label="手机号" align="center">
        </el-table-column>
        <el-table-column prop="user_id" label="用户id" align="center">
        </el-table-column>
        <el-table-column prop="cid" label="用户cid" align="center">
        </el-table-column>
        <el-table-column prop="created_at" label="创建时间" align="center">
        </el-table-column>
        <el-table-column prop="updated_at" label="更新时间" align="center">
        </el-table-column>
      </el-table>
    </div>
    <div class="page_box">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryParams.pageNow"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="queryParams.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import { getAppUserList } from "@/api/userManagement";
export default {
  data() {
    return {
      cidForm: {},
      cidTableData: [],
      queryParams: {
        pageNow: 1,
        pageSize: 10,
      },
      total: null,
    };
  },
  mounted() {
    this.getAppUserList();
  },
  methods: {
    // 获取全部app用户
    getAppUserList() {
      getAppUserList({
        page_now: this.queryParams.pageNow,
        page_size: this.queryParams.pageSize,
        user_id: this.cidForm.userId,
      }).then((res) => {
        if (res.code == 1) {
          this.cidTableData = res.data;
          this.total = res.page_info.total_count;
        } else {
          this.$message.error(res.msg);
          return;
        }
      });
    },

    // 搜索
    handleSearch() {
      this.getAppUserList();
    },

    // 分页
    handleSizeChange(val) {
      this.queryParams.pageSize = val;
      this.queryParams.pageNow = 1;
      this.getAppUserList();
    },
    handleCurrentChange(val) {
      this.queryParams.pageSize = 10;
      this.queryParams.pageNow = val;
      this.getAppUserList();
    },
  },
};
</script>
<style lang="scss" scoped>
.user_cid_box {
  .search_box {
    display: flex;
    padding-bottom: 30px;

    .search_user {
      font-size: 16px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #333333;
      padding-right: 15px;
    }

    .search_btn {
      margin-left: 10px;
    }
  }

  .page_box {
    display: flex;
    justify-content: center;
    padding: 20px 0;
  }
}
</style>
